<template>
  <div class="image__preview">
		<el-image
			v-for="(item, index) in ossDtoList"
			:key="index"
			v-bind="$attrs"
			:preview-src-list="ossDtoList"
			:initial-index="index"
			:src="item"
			:style="{ height: height, width: width }"
			lazy
		/>
	</div>
</template>

<script setup lang="tsx">
import {ref,reactive,defineEmits, onMounted ,PropType, computed, watch} from 'vue';
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

 const state = reactive({
 })

 const props:any = defineProps({
		ossIds: {
			type: [Array, String],
			required: true
		},
		src:{
			type: String as PropType<string>,
			default: ""
		},
		// 标题宽度
		width: {
			type: String as PropType<string>,
			default: "100px"
		},
		// 标题宽度
		height: {
			type: String as PropType<string>,
			default: "100px"
		}
})
	const ossIdList = ref<any[]>([]);
		const ossDtoList = ref<any[]>([]);
			watch(
			() => props.src,
			() => {
				if(props.src){
						ossDtoList.value = [props.src];
				}else{
					//  getByOssDtos();
				}
				
			},
			{
				immediate: true
			}
		);
		// async function getByOssDtos() {
		// 	if (props.ossIds instanceof Array) {
		// 		ossIdList.value = props.ossIds;
		// 	} else {
		// 		ossIdList.value = [props.ossIds];
		// 	}
		// 	const { data } = await getByOssIds(ossIdList.value);
		// 	if (data) {
		// 		ossDtoList.value = data;
		// 	}
		// }
		// getByOssDtos();
</script>

<style  scoped lang="scss" >
.image__preview {
	display: flex;
	flex-direction: row;
	align-items: self-start;
	.el-image {
		display: block;
		margin-right: 10px;
	}
	.el-image:last-child {
		margin-right: 0;
	}
}
</style>
